<template>
  <div>
    <div class="el-card-body">
      <i class="el-icon-tickets"
         style="margin-top: 5px;">
      </i>
      <span style="margin-top: 5px;">
        全部地址
      </span>
      <el-button
        type="primary" size="mini" icon="el-icon-delete" style="margin-left: 85%" @click="addMenu(false)">添加
      </el-button>
    </div>
    <!--表格视图-->
    <div>
      <div>
        <el-table
          :data="tableData"
          stripe
          border>
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="addressId"
            label="地址ID"
            width="120">
          </el-table-column>
          <el-table-column
            prop="userName"
            label="收货人姓名"
            width="160">
          </el-table-column>
          <el-table-column
            prop="contactPhone"
            label="收货人手机号"
            width="160">
          </el-table-column>
          <el-table-column
            prop="takeAddres"
            label="收货地址"
            width="180">
          </el-table-column>
          <el-table-column
            prop="adrsDefault"
            label="是否默认地址"
            width="180">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.adrsDefault"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="默认地址"
                @change="enabledChange(scope.$index, scope.row)">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="warning" size="mini" icon="el-icon-edit"
                @click="showEditView(scope.$index, scope.row,true)" plain>
              </el-button>
              <el-button
                type="danger" size="mini" icon="el-icon-delete"
                @click="handleDelete(scope.$index, scope.row)" plain>
              </el-button>
            </template>
          </el-table-column>
        </el-table>

      </div>
    </div>
    <!--弹框-->
    <el-dialog :title="isEdit ? '编辑地址' : '添加地址'" :visible.sync="dialogVisible" :center="true" width="500px">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-form-item label="收货人姓名" prop="userName">
          <el-input v-model="formData.userName" placeholder="请输入收货人姓名" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="收货人手机" prop="contactPhone">
          <el-input v-model="formData.contactPhone" placeholder="请输入收货人手机" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="默认地址" prop="adrsDefault" required disabled>
          <el-switch v-model="formData.adrsDefault" active-text="默认" active-color="#26D05C"
                     inactive-color="#EF4F4F"></el-switch>
        </el-form-item>
        <el-form-item label="收货地址" prop="takeAddres">
          <el-input v-model="formData.takeAddres" type="textarea" placeholder="请输入收货地址"
                    :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'RentAddress',
    data () {
      return {
        user:JSON.parse(window.sessionStorage.getItem('user')),
        tableData: [],
        dialogVisible:false,
        isEdit:'',
        updateFormData:{},
        formData: {
          adrsUserId:undefined,
          userName: undefined,
          contactPhone: undefined,
          adrsDefault: false,
          takeAddres: undefined,
        },
        updateAdrs:{},
        rules: {
          userName: [{
            required: true,
            message: '请输入收货人姓名',
            trigger: 'blur'
          }],
          contactPhone: [{
            required: true,
            message: '请输入收货人手机',
            trigger: 'blur'
          }],
          takeAddres: [{
            required: true,
            message: '请输入收货地址',
            trigger: 'blur'
          }],
        },
      }
    },
    mounted () {
      this.initTable();
    },
    methods: {
      enabledChange(index,data){
        this.updateAdrsHander()
        this.putRequest('/rent/address',data).then(resp=>{
          if (resp){
            this.dialogVisible=false;
            this.$notify.success({ title: '成功', message: resp.message });
            this.initTable()
          }
        })
      },
      updateAdrsHander(){
        // 获取用户的默认地址
        this.getRequest('/rent/address/?userId='+this.user.userId+'&adrsDefault='+true).then(resp=>{
          if (resp){
            this.updateAdrs=resp
            console.log("我是默认地址1",resp)
            this.updateAdrsHander1()
          }
        })
      },
      updateAdrsHander1(){
        // 修改默认地址状态
        if(this.updateAdrs){
          this.updateAdrs.adrsDefault=false
          console.log("我是默认地址2"+this.updateAdrs)
          this.putRequest('/rent/address',this.updateAdrs).then(resp=>{
            if (resp){
            }
          })
        }
      },
      //删除事件
      handleDelete(index,data){
        this.$confirm('此操作将删除地址, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteRequest('/rent/address/'+data.addressId).then(resp=>{
            this.initTable();
            this.$notify.success({ title: '成功', message: resp.message });
          })
        }).catch(() => {
          this.$notify.info({ title: '消息', message: '已取消删除' });
        });
      },
      //显示修改弹出框赋值
      showEditView(index,data,edit){
        this.isEdit=edit
        Object.assign(this.formData,data);
        this.dialogVisible=true;
      },
      // 显示添加弹出框赋值
      addMenu(edit){
        this.formData.adrsUserId=this.user.userId
        this.isEdit=edit
        this.dialogVisible=true
        this.resetView()
      },
      resetView () {
        this.formData.userName=''
        this.formData.contactPhone=''
        this.formData.takeAddres=''
        this.formData.adrsDefault=false
      },
      // 添加、修改地址
      handelConfirm() {
        //修改事件
        if(this.isEdit){
          this.$refs['elForm'].validate(valid => {
            if (!valid) return
            this.putRequest('/rent/address',this.formData).then(resp=>{
              if (resp){
                this.dialogVisible=false;
                this.$notify.success({ title: '成功', message: resp.message });
                this.initTable();
              }
            })
          })
        }else{
          // 添加事件
          this.$refs['elForm'].validate(valid => {
            if (!valid) return
            this.postRequest('/rent/address',this.formData).then(resp => {
              if (resp) {
                this.$notify.success({ title: '成功', message: resp.message });
                this.dialogVisible=false;
                this.initTable()
              }
            })
          })
        }
      },
      //查询地址列表
      initTable () {
        this.getRequest('/rent/address/'+this.user.userId).then(resp => {
          if (resp) {
            this.tableData = resp
          }
        })
      },
    }
  }

</script>

<style scoped>
  .el-card-body {
    width: 97%;
    padding: 10px;
    border-style:solid;
    border-width: 1px;
    border-color: #ddded9;
    margin: 20px 0px;
  }

</style>
